<template>
  <contentModel
    :no-header-border="true"
    :title="props.title"
    :has-footer="false"
    @close="handleClose"
  >
    <div>
      <div class="tabsbox">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="供应商银行账户信息">
            <query-page
              :table-component-config="tableComponentConfig"
              :table-render-config="mainform1"
              :table-render-keys="accountDataKeys"
              :loading="isLoading2"
              :data="accountData"
              :total="totalAcNum"
              :has-line="false"
              height="calc(100vh - 290px)"
              @query-data="getAccountData"
            >
            </query-page>
          </a-tab-pane>
          <a-tab-pane key="2" title="供应商联系人信息">
            <query-page
              :table-component-config="tableComponentConfig"
              :table-render-config="mainform2"
              :table-render-keys="contactsDataKeys"
              :loading="isLoading3"
              :data="contactsData"
              :total="totalAccNum"
              :has-line="false"
              height="calc(100vh - 290px)"
              @query-data="getContactsData"
            >
            </query-page>
          </a-tab-pane>
          <!-- <a-tab-pane key="3" title="供应商资质信息">
            <div :class="screenClass" class="lefttabbox">
              <query-page
                :table-component-config="tableComponentConfig"
                :table-render-config="mainform3"
                :table-render-keys="aptitudeDataeys"
                :loading="isLoading4"
                :data="aptitudeData"
                :total="totalAptNum"
                :has-line="false"
                height="calc(100vh - 290px)"
                @query-data="getAptitudeData"
              >
              </query-page>
            </div>
          </a-tab-pane> -->
        </a-tabs>
      </div>
    </div>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    selectAccountPage,
    selectContactsPage,
    // selectAptitudePage,
  } from '@/api/supplier/quotation-information';
  import contentModel from '@/common/components/content-model/index.vue';
  import {
    mainform1,
    accountDataKeys,
    mainform2,
    contactsDataKeys,
    // mainform3,
    // aptitudeDataeys,
    tableComponentConfig,
  } from '@/views/basic-configuration/definitionsuppliers/suppliercolumns';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    dataListEdit: {
      type: Object,
      default: () => {
        return {};
      },
      required: false,
    },
    detailsId: {
      type: String,
      default: '',
    },
  });

  const totalAcNum = ref(0);
  const totalAccNum = ref(0);
  // const totalAptNum = ref(0);

  const isLoading2 = ref(true);
  const isLoading3 = ref(true);
  // const isLoading4 = ref(true);

  const accountData = ref<any[]>([]); // 银行账户信息
  const contactsData = ref<any[]>([]); // 银行账户信息
  // const aptitudeData = ref<any[]>([]); // 银行账户信息

  const getAccountData = async (queryInfo: object) => {
    console.log(queryInfo, '======queryInfo');

    accountData.value = [];
    isLoading2.value = true;
    const params = {
      supplierCode: props.detailsId,
      ...queryInfo,
    };
    const { data } = await selectAccountPage(params);
    isLoading2.value = false;
    console.log('查询账户信息');
    totalAcNum.value = data.total;
    accountData.value = data.list;
  };
  const getContactsData = async (queryInfo: object) => {
    contactsData.value = [];
    isLoading3.value = true;
    const params = {
      supplierCode: props.detailsId,
      ...queryInfo,
    };
    console.log('queryInfo', params);
    const { data } = await selectContactsPage(params);
    isLoading3.value = false;
    console.log('查询联系人');
    totalAccNum.value = data.total;
    contactsData.value = data.list;
  };
  // const getAptitudeData = async (queryInfo: object) => {
  //   aptitudeData.value = [];
  //   isLoading4.value = true;
  //   const params = {
  //     //   supplierCode: selectedKeys.value[0],
  //     supplierCode: props.detailsId,
  //     ...queryInfo,
  //   };
  //   const { data } = await selectAptitudePage(params);
  //   isLoading4.value = false;
  //   console.log('查询资质');
  //   totalAptNum.value = data.total;
  //   aptitudeData.value = data.list;
  // };
  onMounted(() => {
    getAccountData();
  });
  const emit = defineEmits(['close']);
  const handleClose = () => {
    emit('close');
  };
</script>
